<template>
  <view class='shopList'>
    <view class="shop" v-for="item in list" :key="item.site_id" @click.stop="goOrder(item)">
      <view class="storeImage">
        <image :src="'https://songcan.xyct1688.com/' + item.logo" mode="scaleToFill" />
        <image class="hot" src="@/static/index/hot.png" mode="widthFix" />
      </view>
      <view class="shopInfo">
        <view class="shopContent">
          <view class="left">
            <view class="shopName"> {{ item.site_name }}</view>
            <view class="delivery">
              <text>☆{{ item.sub_num }}</text>
              <text>起送￥{{ item.start_money }} 配送￥{{ item.delivery_money }}</text>
            </view>
            <view class="place">{{ item.city_name + item.district_name + item.address }}</view>
          </view>
          <view>
            <view :class="item.isTrade ? 'right isTrade' : 'right'">{{ item.isTrade ? '营业中' : '休息中' }} </view>
            <view class="address">
              {{ item.distance }}km
            </view>
          </view>
        </view>
        <view class="commodityList">
          <view class="commodity" v-for="hotGoods in item.hotGoods" :key="hotGoods.goods_id"
            @click.stop="goGoods(item.site_id, hotGoods.sku_id)">
            <image :src="'https://songcan.xyct1688.com/' + hotGoods.goods_image" mode="scaleToFill" />
            <view>{{ hotGoods.goods_name }}</view>
            <text>￥{{ hotGoods.price }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: ['list'],
  data() {
    return {
    }
  },
  methods: {
    // 商家
    goOrder(item) {
      console.log(item);
      uni.navigateTo({
        url: '/pages_order/order/order?site_id=' + item.site_id
      })
    },
    // 商品
    goGoods(site_id, sku_id) {
      uni.navigateTo({
        url: `/pages/Productdetails/Productdetails?site_id=${site_id}&sku_id=${sku_id}&source=0`
      })
    }
  },
}
</script>

<style scoped lang='scss'>
.shopList {
  // padding: 0 15rpx;
  margin-top: 10px;
}

.shop {
  background: #fff;
  display: flex;
  // min-height: 430rpx;
  margin-bottom: 10px;
  padding: 6px;

  .storeImage {
    position: relative;

    image {
      width: 180rpx;
      height: 180rpx;
      margin-right: 5px;
      border-radius: 12rpx;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .hot {
      border-radius: 0;
      position: absolute;
      top: 180rpx;
      left: 0;
      height: 150rpx;
    }
  }



  .shopInfo {
    flex: 1;

    .shopContent {
      display: flex;

      .left {
        flex: 1;

        .shopName {
          font-size: 17px;
          font-weight: 600;
          color: #38383a;
        }

        .delivery {
          color: #aaa;
          font-size: 12px;

          text {
            margin-right: 10px;
          }
        }

        .place {
          height: 80rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          margin-bottom: 6px;
          color: #aaa;

        }

      }

      .right {
        padding: 0 10px;
        border: 2px solid #aaa;
        color: #aaa;
        border-radius: 10rpx;
        height: 60rpx;
        line-height: 50rpx;
      }

      .isTrade {
        border: 2px solid #da6b5f;
        color: #da6b5f;
      }

      .address {
        margin-top: 6px;
        font-size: 12px;
        color: #aaa;
        text-align: right;
      }
    }

    .commodityList {
      display: flex;
      justify-content: space-evenly;

      .commodity {
        width: 160rpx;
        // height: 160rpx;

        image {
          width: 160rpx;
          height: 160rpx;
          border-radius: 12rpx;
        }

        view {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        text {
          color: #f3673e;
        }
      }


    }

  }
}
</style>
